<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录-TPshop开源商城</title>
    <link rel="stylesheet" href="./css/land.css">  
</head>

<body>
    <header>
        <!-- log_1 链接 -->
        <a href="http://localhost:3000">
            <img src="./img/pc_home_logo_default.png">
        </a>
        <span>欢迎登录</span>
    </header>

    <section>
        <div class="land_1">
            <div class="land_2">
                <div class="land_2a">
                    <h1>登录搜豹商城</h1>
                    <a href="./register_1.html">免费注册</a> <!-- 链接未写 -->
                </div>
                <!-- 输入框 密码框 -->
                <div class="Input_box">
                    <input type="text" class="land-user" value="" placeholder="手机号/邮箱" autocomplete="off">
                </div>
                <div class="Password_box">
                    <input type="password" class="land-psw" placeholder="密码" autocomplete="off">
                </div>
                <div class="verification_box">
                    <input type="text" class="" placeholder="不区分大小写">
                    <span>未写</span>  <!-- 验证码未写 -->
                    <a class="shuaX"><img onclick="" src="./img/chg_image.png" class=""></a>
                </div>
                <div class="forget"><a href="#">忘记密码？</a></div><!-- 链接未写 -->
                <div class="land_2b" id="login">登&nbsp;&nbsp;&nbsp;&nbsp;录</div>
                <div class="land_3">
                    <dl>使用第三方登录：</dl>
                    <dt><a href="#" class="weixin" title="WeiXin"></a></dt>
                    <dt><a href="#" class="qq" title="QQ"></a></dt>
                </div>
            </div>
        </div>
    </section>
</body>
<script src="libs/jquery.js"></script>
<script>
		$("#login").click(function(){
		    // 发起ajax请求，将表单中的用户信息提交给后端
		    $.ajax({
		        url:"http://localhost:3000/api",
		        type:"post",
		        data:{
		            type:"land",
		            username: $(".land-user").val(),
		            password: $(".land-psw").val()
		        },
		        success:res=>{
		            // 请求成功后，解析数据，根据后端提示，添加不同的交互功能
		            res = JSON.parse(res);
		            // console.log(res);
		            if(res.code === 1){
		                // 将登录成功的状态存储到本地存储
		                localStorage.setItem("token","ok");
		                localStorage.setItem("username", res.data.username);
		
		                if(confirm("登录成功，是否跳转到首页")){
							$(".land-user").val("");
							$(".land-psw").val("");
		                    location.assign("http://localhost:3000/shouye.html");
		                    // ...
		                }
		            }else if(res.code === 2){
		                alert(res.title);
		                $(".land-psw").val("");
		                $(".land-psw")[0].focus();
		            }else if(res.code === 3){
		                if(confirm("登录失败，" + res.title + "是否去注册")){
							$(".land-user").val("");
							$(".land-psw").val("");
		                    location.assign("http://localhost:3000/register_1.html")
		                }
		            }
		        }
		    })
		    return false;
		})
</script>
</html>